<template>
	<div>
		<ul style="margin-bottom: 30px" class="spec">
			<li v-for="(item, index) in list" :key="index">
				<el-row>
					<el-col :span="18">
						<el-input v-model="item.val" placeholder="规格名称 (比如: 颜色)" style="height: 42px;line-height: 42px;"></el-input>
					</el-col>
					<el-col :span="6">
						<el-button-group>
							<el-button type="primary" icon="el-icon-plus" @click="addSonInput(index)">添加规格项</el-button>
							<el-button type="danger" icon="el-icon-delete" @click="deleteCurrent(item,index)"></el-button>
						</el-button-group>
					</el-col>
				</el-row>
				<div style="display: flex;flex-wrap: wrap">
					<div class="lis" v-for="(i, ins) in item.lis" :key="ins">
						<el-input v-model="i.value" placeholder="请输入内容"></el-input>
						<el-button type="danger" icon="el-icon-close"@click="deleteCurrentSon(item,ins)"></el-button>
					</div>
				</div>
			</li>
		</ul>
		<el-button type="primary" icon="el-icon-plus" @click="addInput">添加规格</el-button>
		<el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新规格项目表</el-button>
		<span style="font-size: 12px;color: #909399;padding-left: 20px">第二次刷新，数据将会清空</span>
		<div style="margin-top: 20px" v-if="isShowTable">
			<el-table
					:data="tableData"
					border
					style="width: 100%">
				<el-table-column
						prop="spec"
						label="规格"
						width="180">
					<template slot-scope="scope">
						<span>{{ scope.row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column
						prop="total"
						label="报名人数"
						width="180">
					<template slot-scope="scope">
						<el-input v-model="scope.row.total" placeholder=""></el-input>
					</template>
				</el-table-column>
				<el-table-column
						prop="price"
						label="费用">
					<template slot-scope="scope">
						<el-input v-model="scope.row.price" placeholder=""></el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-button type="danger" @click="conTable">打印表格数据</el-button>
	<!--	确认删除此规格dialog	-->
		<el-dialog
			title="提示"
			:visible.sync="delDialogVisible"
			width="30%">
			<span>确认要删除此规格?</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sureDel">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 执行组合排列的函数
	function doExchange(array){
		let len = array.length;
		// 当数组大于等于2个的时候
		if(len >= 2){
			// 第一个数组的长度
			let len1 = array[0].length;
			// 第二个数组的长度
			let len2 = array[1].length;
			// 2个数组产生的组合数
			let lenBoth = len1 * len2;
			//  申明一个新数组,做数据暂存
			let items = new Array(lenBoth);
			// 申明新数组的索引
			let index = 0;
			// 2层嵌套循环,将组合放到新数组中
			for(let i=0; i<len1; i++){
				for(let j=0; j<len2; j++){
					items[index] = array[0][i] +" , "+ array[1][j];
					index++;
				}
			}
			// 将新组合的数组并到原数组中
			let newArr = new Array(len -1);
			for(let i=2;i<array.length;i++){
				newArr[i-1] = array[i];
			}
			newArr[0] = items;
			// 执行回调
			return doExchange(newArr);
		}else{
			return array[0];
		}
	}

	//执行
	// let array = [['a', 'b'], [1, 2, 3]];
	// var arr1 = [['j','k','g']];
	// console.log(doExchange(array));

	export default {
		name: "spec",
		data() {
			return {
				list: [],
				num: 1,
				delDialogVisible: false,
				delObj: {},
				tableData: [],
				isShowTable: false,
				tableData2: [
					{
						spec: '2016-05-02',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1518 弄'
					},
					{
						spec: '2016-05-04',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1517 弄'
					},
					{
						spec: '2016-05-01',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1519 弄'
					},
					{
						spec: '2016-05-03',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1516 弄'
					}
				]
			}
		},
		methods: {
			addInput() {
				this.list.push({id: '', val:'',lis: []})
			},
			deleteCurrent(data,index) {
				this.delDialogVisible = true
				console.log(data,index)
				this.delObj = data
			},
			sureDel() {
				this.delDialogVisible = false
				this.list = this.list.filter( (item) => this.delObj !== item)
				console.log(this.list)
			},
			addSonInput(index) {
				console.log(index)
				this.list[index].lis.push({value: ''})
			},
			deleteCurrentSon(data, i) {
				console.log(data,i)
				data.lis.splice(i, 1)
			},
			refresh() {
				console.log(this.list)
				if(this.list.length <= 0) {
					return
				}
				this.isShowTable = true
				console.log('刷新')
				let arr = this.list.map( item => {
					return item.lis.map(ite => ite.value)
				})
				// console.log(arr)
				let combine = doExchange(arr)
				let arr2 = []
				console.log(combine)
				combine.forEach( (item, index) => {
					let obj = {}
					obj.title = item
					obj.id = ''
					obj.total = ''
					obj.price = ''
					arr2.push(obj)
				})
				console.log(arr2)
				this.tableData = arr2
			},
			conTable() {
				console.log(this.tableData)
			}
		}
	}
</script>

<style scoped lang="scss">
	.spec {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			border: 1px solid #DCDFE6;
			padding: 10px;
			margin-bottom: 10px;
			.lis {
				display: flex;
				width: 30.4%;
				margin: 5px 5px 5px 0;
			}
		}
	}
</style>
